<template lang="html">
  <!-- swiper -->
  <!--
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../../assets/images/phone/CnQOjVeqmcKAcTu2AATg1-vazac206.png480x480.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="../../assets/images/phone/Cix_s1eqmcGAcfvUAAvXg1CZLVk391.png480x480.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="../../assets/images/phone/Cix_s1eqmcCAVZGcAAZVnIzEP88587.png480x480.jpg" alt="">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  -->
  <div class="swiper-container swiper-container-horizontal">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-active" style="width: 414px;">Slide 1</div>
        <div class="swiper-slide swiper-slide-next" style="width: 414px;">Slide 2</div>
        <div class="swiper-slide" style="width: 414px;">Slide 3</div>
        <div class="swiper-slide" style="width: 414px;">Slide 4</div>
        <div class="swiper-slide" style="width: 414px;">Slide 5</div>
        <div class="swiper-slide" style="width: 414px;">Slide 6</div>
        <div class="swiper-slide" style="width: 414px;">Slide 7</div>
        <div class="swiper-slide" style="width: 414px;">Slide 8</div>
        <div class="swiper-slide" style="width: 414px;">Slide 9</div>
        <div class="swiper-slide" style="width: 414px;">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>
</template>

<script>
import Swiper from 'Swiper'

export default {
  methods: {
    setSwiper () {
      let swiper = new Swiper('.swiper-container', {
        loop: true,
        speed: 400,
        spaceBetween: 100,
        pagination : '.swiper-pagination'
      })
    }
  },
  mounted () {
    this.setSwiper();
  }
}
</script>

<style lang="css">
.swiper-container {
  width: 100%;
  height: 300px;
}
.swiper-slide {
  text-align: center;
}
img {
  height: 280px;
}
</style>
